.contact{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: var(--size-s) !important;
}

.contact__title{
    font-size: var(--size-2xl);
    color: var(--clr-light);
    text-transform: capitalize;
}

.contact__subtitle{
    font-size: var(--size-s);
    margin-top: -1rem;
    color: var(--clr-blue);
    text-transform: capitalize;
}

.contact__wrapper{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact__link{
    text-decoration: none;
}

.contact__link__wrapper{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow:  0px 0px 15px var(--clr-shadow);
    width: 90%;
    border-radius: 0.5rem;
    margin: 0 auto;
    box-sizing: content-box;
    padding: 3px 6px;
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.contact__link__wrapper:hover{
    transform: scale(1.05);
}

.contact__btn{
    color: var(--clr-yellow);
    background-color: inherit;
    width: var(--size-xl);
    height: var((--size-xl));
}

.contct__description{
    font-size: var(--size-s);
    color: var(--clr-slate600);
    font-weight: 600;
}


/* xs */
@media (min-width: 475px){
    .contact{
        gap: 1.5rem;
    }

    .contact__title{
        font-size: var(--size-3xl);
    }
    
    .contact__subtitle{
        font-size: var(--size-lg);
        margin-top: -1.5rem;
    }

    .contact__wrapper{
        gap: 1.5rem;
    }

    .contact__btn{
        width: var(--size-2xl);
        height: var(--size-2xl);
    }
    
    .contct__description{
        font-size: var(--size-base);
    }
    
    .contact__link__wrapper{
        padding: 12px 9px;
    }
}

/* sm */
/* @media (min-width: 640px){} */

/* md */
@media (min-width: 768px){
    .contact__wrapper{
        flex-direction: row;
        align-items: center;
    }
    
    .contact__link__wrapper{
        justify-content: center;
        box-shadow:  none;
        transition: 
        transform 0.3 cubic-bezier(0.165, 0.84, 0.44, 1),
        box-shadow 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .contact__link__wrapper:hover{
        transform: translateY(-8px);
        box-shadow:  0px 0px 15px var(--clr-shadow);
    }

}

/* lg */
@media (min-width: 1024px){
    .contact__title{
        font-size: var(--size-4xl);
    }
    
    .contact__subtitle{
        font-size: var(--size-lg);
    }
 
    .contact__btn{
        width: var(--size-3xl);
        height: var(--size-3xl);
    }

    .contct__description{
        font-size: var(--size-xl);
    }

}

/* xl */
@media (min-width: 1280px){
    .contact{
        gap: 2rem;
    }

    .contact__title{
        font-size: var(--size-5xl);
    }

    .contact__subtitle{
        font-size: var(--size-xl);
        margin-top: -2rem;
    }
    
    .contact__wrapper{
        gap: 2rem;
    }

    .contact__btn{
        width: var(--size-3xl);
    }

    .contact__link__wrapper{
        padding: 15px 12px;
    }
}

/* 2xl */
/* @media (min-width: 1536px){} */